<template>
  <div class="wrapper" ref="aaaa">
    <div  class="content">
      <button @click="btnClick">按钮</button>

      <div @click="divClick">呵呵呵呵好</div>

      <ul>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
        <li>liebiao</li>
      </ul>
    </div>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import Pullup from '@better-scroll/pull-up'

  BScroll.use(Pullup)

export default {
  name: "Category",
  data() {
    return {
      scroll: null
    }
  },
  // 
  mounted() {
    this.scroll = new BScroll(this.$refs.aaaa, {
      probeType: 3,
      click: true,
      pullUpLoad: true,
    })

    this.scroll.on('scroll', (position) => {
    // console.log(position);
      // console.log(this.$refs);
      // console.log(this.scroll);
    })

    this.scroll.on('pullingUp',(position) => {

      console.log('成功了！！！！！！');

      setTimeout(() => {
        this.scroll.finishPullUp()
      },1000)
    })
  },
  methods: {
    btnClick() {
      console.log('btnClick');
    },
    divClick() {
      console.log('divClick');
    }
  }
}
</script>

<style scoped>
  .wrapper {
    height: 150px;
    background-color: red;
    overflow: hidden;
  }
</style>
